<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>
    <div class="udukb">  <!--导栏-->
        <a href={% url 'index' %}><img src="{% static 'img/loog.png' %}" width="200px" height="60px"></a>
        <div class="aeuj">
            <ul>
                <li ><a href={% url 'index' %}>音乐馆</a></li>
                <li><a href={% url 'ujqi_rdtf' %}>音乐排行</a></li>
                <li><a href={% url 'wd' %} class="yoqc">我的音乐</a></li>
            </ul>
        </div>
        <div class="rtfp">
            <input type="text">
            <div><span class="layui-icon">&#xe615;</span></div>
        </div>
        <a href={% url 'logn' %} class="layui-btn"><span>登录</span></a>
    </div>
    <div class="qrujqi">
      <div class="ujgg">
        <h1 align="center">纯净音乐空间 听我想听 思我所思</h1>
        <h3 align="center">登录管理音乐</h3>
        <a href={% url 'logn' %} class="layui-btn"><span>立即登录</span></a>
      </div>
    </div>
</body>
<style>
  .qrujqi{
    width:100%;
    height:100vh;
    background:url('../static/img/bg.webp');
    margin-top:2px;
    position: fixed;
  }
  .ujgg{
    margin-top:160px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ujgg h1{
    font-size: 48px;
    color:white;
  }
  .ujgg h3{
    color:white;
    margin-top:20px;
    margin-bottom: 30px;
    font-size: 24px;
  }
  .ujgg a{
    width:90px;
    height:35px;
    margin:0 auto;
    line-height: 35px;
  }
</style>
<style>  
/* 头部导航栏 */
    .udukb{
        width:1080px;
        height:60px;
        margin:0 auto;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .aeuj ul{
        list-style: none;
    }
    .aeuj ul li{
        display: inline;
        padding-left:10px;
        padding-right: 10px;
        font-size: 18px;
    }
    .yoqc{
        color:#1E9FFF;
    }
    .rtfp input{
        height:25px;
        border: none;
        border-top:1px black solid;
        border-bottom:1px black solid;
        border-left:1px black solid;
        font-size: 16px;
    }
    .rtfp{
        display: flex;
    }
    .rtfp div{
        height:25px;
        width:20px;
        border-top:1px black solid;
        border-right:1px black solid;
        border-bottom:1px black solid;
        line-height: 25px;
    }
</style>

</html>